<template>
	<view class="content">
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="基础使用" label-width="550">
				<template slot='header'>
					<g-switch v-model="show"></g-switch>
				</template>
				<g-weckit :visible.sync='show' title="筛选用户"></g-weckit>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="内容插槽" label-width="550">
				<template slot='header'>
					<g-switch v-model="show1"></g-switch>
				</template>
				<g-weckit :visible.sync='show1' title="slot">
					<view >
						<view v-for="(item,index) in 50">我是窗口的内容{{index}}</view>
					</view>
				</g-weckit>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="foot插槽" label-width="550">
				<template slot='header'>
					<g-switch v-model="show2"></g-switch>
				</template>
				<g-weckit :visible.sync='show2' title="slot">
					<view >
						<view v-for="(item,index) in 50">我是窗口的内容{{index}}</view>
					</view>
					<template slot='foot'>
						<view style="display: flex; justify-content: space-around;">
							<g-button type="info" :custom="[250,80,16]">取消</g-button>
							<g-button type="primary" :custom="[450,80,16]">确认</g-button>
						</view>
					</template>
				</g-weckit>
			</g-title-wrap>
		</view>
		<g-divider></g-divider>
		<view style="padding:36rpx 16rpx;">
			<g-title-wrap label="head-right插槽" label-width="550">
				<template slot='header'>
					<g-switch v-model="show3"></g-switch>
				</template>
				<g-weckit :visible.sync='show3' title="head-right插槽">
					<view >
						<view v-for="(item,index) in 50">我是窗口的内容{{index}}</view>
					</view>
					<template slot='foot'>
						<view style="display: flex; justify-content: space-around;">
							<g-button type="info" :custom="[250,80,16]">取消</g-button>
							<g-button type="primary" :custom="[450,80,16]">确认</g-button>
						</view>
					</template>
					<template slot='head-right'>
						<g-button type="success" size="mini">发送</g-button>
					</template>
				</g-weckit>
			</g-title-wrap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				show1:false,
				show2:false,
				show3:false,
			};
		}
	}
</script>

<style lang="scss">

</style>
